<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <title>Title</title>
    <!-- 定制版 ionic 样式 -->
    <!--<link rel="stylesheet" href="https://unpkg.com/vonic@2.0.0-beta.11/dist/vonic.min.css">-->
    <link rel="stylesheet" href="vendor/vonic.min.css">
    <style>
        h2 {
            font-family: Candara,Calibri,Segoe,Segoe UI,Optima,Arial,sans-serif;
            color: #888;
        }
        .page.has-navbar .page-content {
            padding-top: 100px;
        }
    </style>


</head>
<body>
<von-app></von-app>


<!-- 依赖库 axios/vue/vue-router -->
<!--<script src="https://unpkg.com/axios@0.15.3/dist/axios.min.js"></script>-->
<script src="vendor/axios.min.js"></script>
<!--<script src="https://unpkg.com/vue@2.1.10/dist/vue.min.js"></script>-->
<script src="vendor/vue.min.js"></script>
<!--<script src="https://unpkg.com/vue-router@2.2.1/dist/vue-router.min.js"></script>-->
<script src="vendor/vue-router.min.js"></script>

<!-- vonic 核心文件 -->
<!--<script src="https://unpkg.com/vonic@2.0.0-beta.11/dist/vonic.min.js"></script>-->
<script src="vendor/vonic.min.js"></script>


<script>
    // Page Components
    var Index = {
        template: `
            <div class="page has-navbar" v-nav="{'title': 'Component and Service'}">
                    <div class="page-content padding padding-top">
                        <md-button class="button button-assertive button-block">
                            just a button
                        </md-button>

                        <md-button class="button button-balanced button-block" @click.native="showToast()">
                            show toast
                        </md-button>
                        <md-button class="button button-calm button-block" @click.native="showLoading()">
                            show loading
                        </md-button>

                        <md-button class="button button-positive button-block" @click.native="showDialog()">
                            show dialog
                        </md-button>

                    </div>
                </div>
            `,
        methods: {
            showToast() {
                $toast.show("button clicked.");

            },
            showLoading() {
                $loading.show('加载中...');
            },
            showDialog() {
                $dialog
            }
        }
    }

    // Routes
    var routes = [
        { path: '/', component: Index }
    ]

    // Start up
    Vue.use(Vonic.app, {
        routes: routes
    })
</script>

</body>
</html>
